<template>
	<view class="plant">
		<view class="course">
			<view class="">TASJ</view>
			<view class="">种植教程</view>
		</view>
		<!-- 轮播图 -->
		<view class="">
			<swiper class="swiper" circular autoplay="true" :interval="interval" :duration="duration">
				<swiper-item>
					<view @click="goDetail(bannerList.id)" class="swiper-item uni-bg-red">
						<image :src="bannerList.image" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="guesslike">
			<view class="">
				<view class="like"><image src="http://www.szzn.group/uploads/20221107/78cb674c00ac2f5b8d2e3ad318c90286.png" mode="widthFix"></image></view>
				<!-- <view class="">更多>></view> -->
			</view>
		</view>

		<view class="">
			<view class="recommendcourse">
				<view class="tuijian" v-for="i in likeList" :key="i.id" @click="immediatelyBuy(i.id)">
					<view class="">热门推荐课程</view>
					<view class="">讲师：{{ i.lecturer_name }}</view>
					<view class="salse">已售{{ i.browse_count }}</view>
					<view class="paly">立即观看</view>
				</view>
			</view>
		</view>

		<view class="hotcourse">
			<view class=""><image src="http://www.szzn.group/uploads/20221107/78cb674c00ac2f5b8d2e3ad318c90286.png" mode="widthFix"></image></view>
		</view>

		<view class="">
			<view class="title-list">
				<scroll-view scroll-x="true" class="scroll-X" @scroll="scroll" style="width: 600rpx;white-space: nowrap;">
					<view>
						<view class="class_list" v-for="item in courseList" :key="item.id" :class="active == item.id ? 'active-style' : ''" @click="activeC(item.id)">
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="content-course">
				<view class="courselist" v-for="i in specialList" :key="i.id">
					<view class=""><image :src="i.image" mode=""></image></view>
					<view class="">
						<view class="">
							<view class="">{{ i.title }}</view>
							<view class="" v-for="item in i.label" :key="item.id">
								<view class="">{{ item }}</view>
							</view>
						</view>

						<view class="">
							<view class="">￥{{ i.money }}</view>
							<view @click="immediatelyBuy(i.id)" class="">立即购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar @selectTabbar="selectTabbar" ref="tabbar"></tabbar>
	</view>
</template>

<script>
import tabbar from '@/components/tabBar/tabBar.vue';
import { plantBanner, plantGetCourseList, plantspecialList, plantLike } from '@/api/api.js';
export default {
	components: {
		tabbar
	},
	data() {
		return {
			active: '',
			autoplay: true,
			interval: 3000,
			duration: 1000,
			bannerList: {}, //轮播图
			courseList: [], //导杆栏列表
			specialList: [], //课程列表
			page: 1,
			limit: 15,
			likeList: [], //猜你喜欢
			total: 0
		};
	},
	// 分享
	onShareAppMessage() {
		return {
			title: '优栽园',
			path: 'pages/plantcourse/index/index'
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '优栽园',
			path: 'pages/plantcourse/index/index'
		};
	},
	onShow() {
		this.$refs.tabbar.current = 1;
	},
	onLoad() {
		uni.showLoading({})
		this.plantBanner();
		this.plantGetCourseList();
		this.plantLike();
	},
	onReachBottom() {
		if (this.total == this.specialList.length) {
			return;
		}
		this.page = this.page + 1;
		uni.showLoading({
			title: '加载中'
		});
		let time = setTimeout(() => {
			let data = `grade_id=${this.active}&search=${0}&page=${this.page}&limit=${this.limit}`;
			plantspecialList(data).then(res => {
				if (res.data.code == '200') {
					uni.hideLoading();
					this.specialList.push(...res.data.data);
					this.total = res.data.data.total
				} else {
					uni.hideLoading();
				let times = setTimeout(()=>{
						uni.showToast({
							title:res.data.msg,
							duration:800,
							icon:'error'
						})
						clearTimeout(times)
					},500)
				}
			});
			clearTimeout(time);
		}, 1500);
	},
	methods: {
		// 获取Banner
		plantBanner() {
			plantBanner().then(res => {
				if (res.data.code == '200') {
					uni.hideLoading()
					if(res.data.data.length == 0){
						return
					}else {
						uni.hideLoading()
						this.bannerList = res.data.data[0];
					}
				}
			});
		},
		// 获取分类
		plantGetCourseList() {
			plantGetCourseList().then(res => {
				if (res.data.code == '200') {
					uni.hideLoading()
					this.courseList = res.data.data;
					this.active = this.courseList[0].id;
					this.plantspecialList(this.active);
				}else {
					uni.hideLoading()
				}
			});
		},
		// 专题/课程列表
		plantspecialList(id) {
			let data = `grade_id=${id}&search=${0}&page=${this.page}&limit=${this.limit}`;
			plantspecialList(data).then(res => {
				if (res.data.code == '200') {
					uni.hideLoading()
					this.specialList = res.data.data.list;
					this.total = res.data.data.total;
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon:'error'
					});
				}
			});
		},
		//猜你喜欢
		plantLike() {
			plantLike().then(res => {
				this.likeList = res.data.data;
			});
		},
		// 选择主标题
		activeC(type) {
			this.active = type;
			this.page = 1;
			this.plantspecialList(this.active);
			uni.showLoading({
				title:'加载中',
			})
		},
		// 课程详情
		immediatelyBuy(id) {
			if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
				uni.showModal({
					title: '提示',
					content: '未登入,请先登入',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/page_login/index/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			uni.navigateTo({
				url: '/page_plantcourse/couresdetail/couresdetail?id=' + id
			});
		},
		// 切换tabbar
		selectTabbar(e) {
			uni.switchTab({
				url: e.pagePath
			});
		}
	}
};
</script>

<style lang="scss">
.plant {
	margin-top: 100rpx;
	padding: 0 26rpx 0 30rpx;
}

.course {
	margin-bottom: 50rpx;
	> view:nth-child(1) {
		font-weight: 700;
		color: #979797;
		font-size: 36rpx;
	}

	> view:nth-child(2) {
		font-weight: 700;
		font-size: 36rpx;
	}
}

.swiper {
	height: 270rpx;
}

.swiper-item {
	display: block;
	height: 270rpx;
	line-height: 270rpx;
	text-align: right;
	position: relative;
}

.swiper-item > image {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 40rpx;
}

.guesslike {
	padding: 40rpx 0 20rpx;
	> view {
		display: flex;
		align-items: center;
		justify-content: space-between;

		> view:nth-child(1) {
			font-weight: 700;
			font-size: 28rpx;
		}

		> view:nth-child(2) {
			color: #43a56d;
			font-size: 26rpx;
		}
	}
}

.recommendcourse {
	display: flex;

	> view:nth-child(1) {
		// flex: 1;
		width: 350rpx;
		height: 196rpx;
		box-sizing: border-box;
		margin-right: 15rpx;
		border: 2px solid #289958;
		border-radius: 40rpx;
		padding: 20rpx;

		> view:nth-child(1) {
			font-weight: 700;
			font-size: 30rpx;
		}

		> view:nth-child(2) {
			font-size: 24rpx;
			padding: 20rpx 0 60rpx 20rpx;
		}

		> view:nth-child(3) {
			padding: 5rpx 10rpx;
			width: 150rpx;
			color: #fff;
			background-color: #289958;
			border-radius: 50px;
			font-size: 20rpx;
			text-align: center;
		}
	}

	> view:nth-child(2) {
		// flex: 1;
		width: 350rpx;
		height: 196rpx;
		box-sizing: border-box;
		border: 2px solid #289958;
		border-radius: 40rpx;
		padding: 20rpx;

		> view:nth-child(1) {
			font-weight: 700;
			font-size: 30rpx;
		}

		> view:nth-child(2) {
			font-size: 24rpx;
			padding: 20rpx 0 60rpx 20rpx;
		}

		> view:nth-child(3) {
			padding: 5rpx 10rpx;
			width: 150rpx;
			text-align: center;
			color: #fff;
			background-color: #289958;
			border-radius: 50px;
			font-size: 20rpx;
		}
	}
}

.hotcourse {
	padding: 40rpx 0 10rpx 0;

	image {
		height: 46rpx;
		width: 200rpx;
	}
}

.title-list {
	// display: flex;
	// flex-wrap: wrap;
	// justify-content: start;
	padding: 0 50rpx;
	// width: 600rpx;
	// // width: 100%;
	// overflow-x: auto;
}

.title-list view {
	display: flex;
	// width: 160rpx;
	margin: 10rpx;
	// // width: 180rpx;
	padding: 10rpx 0;
	margin-right: 60rpx;
	// font-size: 28rpx;
}

.active-style {
	font-weight: 700;
	border-bottom: 6rpx solid #0eaeae;
}
//asdasda

.courselist {
	padding: 20rpx;
	height: 312rpx;
	box-sizing: border-box;
	margin-top: 18rpx;
	border-radius: 25rpx;
	box-shadow: 1px 1px 8px 3px #eee, -1px -1px 8px 3px #eee;
	display: flex;
	align-items: center;
	image {
		height: 245rpx;
		width: 100%;
		border-radius: 20rpx;
		vertical-align: middle;
	}

	> view:nth-child(1) {
		// flex: 1.2;
		width: 245rpx;
		margin-right: 15rpx;
	}

	> view:nth-child(2) {
		flex: 2;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		> view:nth-child(1) {
			font-weight: 700;
			font-size: 34rpx;
			width: 380rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			> view:nth-child(2) {
				display: flex;
				padding: 20rpx 0;
				> view:nth-child(1) {
					font-size: 24rpx;
					color: #2db28f;
					background-color: #d6f6ee;
					padding: 4rpx 8rpx;
				}

				> view:nth-child(2) {
					margin: 0 10rpx;
					font-size: 24rpx;
					color: #ff7975;
					background-color: #ffe6e5;
					padding: 4rpx 8rpx;
				}

				> view:nth-child(3) {
					font-size: 24rpx;
					color: #ff9823;
					background-color: #fff4e5;
					padding: 4rpx 8rpx;
				}
			}
		}

		> view:nth-child(2) {
			> view:nth-child(1) {
			}
			> view:nth-child(2) {
				margin-top: 15rpx;
				// padding: 7rpx 25rpx;
				width: 204rpx;
				line-height: 50rpx;
				text-align: center;
				height: 50rpx;
				border-radius: 50px;
				text-align: center;
				color: #3db963;
				border: 1px solid #3db963;
				font-size: 24rpx;
			}
		}
	}
}
// .courselist:last-child {
// 	padding: 0 0 125rpx 0;
// }
.content-course {
	padding: 0 0 40rpx 0;
}
.content-course:last-child {
	padding: 0 0 160rpx 0;
}
.like {
	image {
		width: 200rpx;
		height: 46rpx;
	}
}
.tuijian {
	position: relative;
	.paly {
		position: absolute;
		top: 20rpx;
		right: -5rpx;
		font-size: 24rpx;
		background-color: #289958;
		color: #fff;
		padding: 5rpx;
	}
	.paly::after {
		content: '';
		position: absolute;
		left: -43.5rpx;
		top: 0rpx;
		width: 0rpx;
		height: 0rpx;
		border-left: 22rpx solid transparent;
		border-right: 22rpx solid #289958;
		border-top: 22rpx solid transparent;
		border-bottom: 22rpx solid transparent;
		// background-color: red;
	}
	.salse {
		position: absolute;
		bottom: 15rpx;
	}
	.class_list {
		width: 160rpx;
	}
}
</style>
